<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>之江学院官网</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1>之江学院</h1>
            </div>
            <div class="search-box">
                <input type="text" placeholder="搜索...">
                <button>搜索</button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav class="main-nav">
        <div class="container">
            <ul>
                <li><a href="#">学院首页</a></li>
                <li><a href="#">学院概况</a></li>
                <li><a href="#">教育教学</a></li>
                <li><a href="#">科学研究</a></li>
                <li><a href="#">招生就业</a></li>
                <li><a href="#">校园生活</a></li>
            </ul>
        </div>
    </nav>

    <!-- 图片轮播区 -->
    <section class="banner">
        <div class="slideshow-container">
            <div class="slide fade">
                <img src="1.jpg" alt="校园风光1">
            </div>
            <div class="slide fade">
                <img src="2.jpg" alt="校园风光2">
            </div>
            <div class="slide fade">
                <img src="3.jpg" alt="校园风光3">
            </div>
            <div class="slide fade">
                <img src="4.jpg" alt="校园风光4">
            </div>

            <!-- 导航点 -->
            <div class="dots" style="text-align:center">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
                <span class="dot" onclick="currentSlide(4)"></span>
            </div>
        </div>
    </section>

    <!-- 主要内容区 -->
    <main class="main-content">
        <div class="container">
            <!-- 新闻版块 -->
            <section class="news-section">
                <h2 class="section-title">新闻中心</h2>
                <div class="news-grid">
                    <div class="news-item">
                        <h3>学院要闻</h3>
                        <ul>
                            <li><a href="#">学院召开2023年度工作总结大会</a></li>
                            <li><a href="#">之江学院与阿里巴巴签订校企合作协议</a></li>
                        </ul>
                    </div>
                    <div class="news-item">
                        <h3>通知公告</h3>
                        <ul>
                            <li><a href="#">关于2024年寒假放假安排的通知</a></li>
                            <li><a href="#">图书馆寒假开放时间调整公告</a></li>
                        </ul>
                    </div>
                    <div class="news-item">
                        <h3>学术动态</h3>
                        <ul>
                            <li><a href="#">"人工智能前沿技术"学术讲座通知</a></li>
                            <li><a href="#">我院教师在SCI期刊发表重要研究成果</a></li>
                        </ul>
                    </div>
                    <div class="news-item">
                        <h3>媒体之江</h3>
                        <ul>
                            <li><a href="#">浙江日报报道我院创新创业教育成果</a></li>
                            <li><a href="#">央视新闻采访我院乡村振兴研究团队</a></li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 公告版块 -->
            <section class="announcement-section">
                <h2 class="section-title">公告栏</h2>
                <ul class="announcement-list">
                    <li><a href="#">关于2024年春季学期开学工作的通知</a></li>
                    <li><a href="#">2024年度国家自然科学基金项目申报指南</a></li>
                    <li><a href="#">校园网系统升级维护通知</a></li>
                    <li><a href="#">关于开展2024年度教学成果奖评选的通知</a></li>
                </ul>
            </section>

            <!-- 主内容区 -->
            <section class="content-section">
                <div class="content-block">
                    <h3>校园生活</h3>
                    <ul>
                        <li><a href="#">学生活动</a></li>
                        <li><a href="#">社团风采</a></li>
                        <li><a href="#">校园风光</a></li>
                    </ul>
                </div>
                <div class="content-block">
                    <h3>服务地方</h3>
                    <ul>
                        <li><a href="#">校地合作</a></li>
                        <li><a href="#">科技成果转化</a></li>
                        <li><a href="#">社会培训</a></li>
                    </ul>
                </div>
                <div class="content-block">
                    <h3>媒体之江</h3>
                    <ul>
                        <li><a href="#">媒体报道</a></li>
                        <li><a href="#">学院视频</a></li>
                        <li><a href="#">电子院报</a></li>
                    </ul>
                </div>
            </section>

            <!-- 专题网站版块 -->
            <section class="special-section">
                <h2 class="section-title">专题网站</h2>
                <div class="special-grid">
                    <a href="#" class="special-item">党建工作</a>
                    <a href="#" class="special-item">教学工作</a>
                    <a href="#" class="special-item">科研工作</a>
                    <a href="#" class="special-item">学生工作</a>
                    <a href="#" class="special-item">招生信息</a>
                    <a href="#" class="special-item">就业指导</a>
                    <a href="#" class="special-item">国际交流</a>
                    <a href="#" class="special-item">校友之家</a>
                    <a href="#" class="special-item">图书馆</a>
                    <a href="#" class="special-item">信息中心</a>
                    <a href="#" class="special-item">后勤服务</a>
                    <a href="#" class="special-item">工会之家</a>
                </div>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-links">
                <a href="#">关于我们</a> |
                <a href="#">联系方式</a> |
                <a href="#">网站地图</a> |
                <a href="#">意见建议</a>
            </div>
            <div class="copyright">
                <p>版权所有 © 2023 之江学院 | 浙ICP备XXXXXXXX号</p>
            </div>
        </div>
    </footer>

    <script>
        // 图片轮播功能
        let slideIndex = 0;
        showSlides();

        function showSlides() {
            let i;
            let slides = document.getElementsByClassName("slide");
            let dots = document.getElementsByClassName("dot");

            // 隐藏所有幻灯片
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }

            slideIndex++;

            // 循环播放
            if (slideIndex > slides.length) {
                slideIndex = 1;
            }

            // 更新导航点状态
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }

            // 显示当前幻灯片
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";

            // 3秒后切换下一张
            setTimeout(showSlides, 3000);
        }

        // 点击导航点切换幻灯片
        function currentSlide(n) {
            slideIndex = n - 1;
            showSlides();
        }
    </script>
</body>
</html>